<template>
  <div id="goodsType">


    <!--条件查询-->
    <el-form :inline="true" :model="searchObj" ref="formList" class="demo-form-inline">
      <el-form-item label="类型名称">
        <el-input v-model="searchObj.categoryName" placeholder="请输入类型名称"></el-input>
      </el-form-item>
      <el-form-item label="类型级别">
        <el-select v-model="searchObj.level" placeholder="请选择" clearable>
          <el-option
              v-for="item in goodsTypeLevel"
              :key="item"
              :label="item+'级类别'"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryBtn">查询</el-button>
        <el-button @click="resetForm('formList')">
          <i class="el-icon-refresh-right"></i>
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!--新增-->
    <el-button type="primary" plain @click="addBtn">
      <i class="el-icon-user-solid"></i>
      新增
    </el-button>
    <el-button type="warning" plain @click="delsBtn">
      <i class="el-icon-delete-solid"></i>
      批量删除
    </el-button>

    <!--数据表格-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="icon"
          label="图标">
        <template slot-scope="scope">
          <el-avatar :size="45" shape="square" :src="scope.row.icon" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="categoryName"
          label="类型名称">
      </el-table-column>
      <el-table-column
          label="父级类型">
        <template slot-scope="scope">
          <span>{{ parentType(scope.row.parentId) }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="类型级别">
        <template slot-scope="scope">
          <span>{{ scope.row.level+'级类型' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="禁用/启用">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              @change="switchStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              @click="updateGoodsType(scope.row.id)"
              type="text"
              size="small"
              icon="el-icon-edit">
            修改
          </el-button>
          <el-button
              @click="delGoodsCategory(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <router-view @query="queryBtn()"></router-view>
    <!--分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "GoodsType",
  data() {
    return{
      //商品类型级别
      goodsTypeLevel: [],
      //批量选中的row
      multipleSelection: [],
      //查询条件对象
      searchObj: {
        categoryName: "",
        level: "",
      },
      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 10,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 返回数据对象
      tableData: [],

      // 商品类型列表
      goodsTypeList: [],
    }
  },
  methods:{
    //父级类型
    parentType(id) {
      const data = this.goodsTypeList;
        for(let i =0;i<data.length;i++) {
            if(data[i].id === id)
              return data[i].categoryName
        }
        return '无'
    },
    //删除
    delGoodsCategory(row) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
        const { data: res } = await this.$http.post(`/goodsCategory/delGoodsCategory`,row);
        this.$message.success(res);
        //界面刷新
        this.queryBtn();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //批量删除
    delsBtn() {
      if(this.multipleSelection.length === 0)
        return this.$message.info("请先选中你要删除的商品类型！")
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
        const { data: res } = await this.$http.post(`/goodsCategory/delsGoodsCategory`,this.multipleSelection);
        this.$message.success(res);
        //界面刷新
        this.queryBtn();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //新增商品类型
    addBtn() {
      this.$router.push('/addGoodsType')
    },
    //修改商品类型
    updateGoodsType(id) {
      this.$router.push({ path: '/updateGoodsType', query: { id: id } })
    },
    //禁用/启用商品类型
    async switchStatus(row) {
      const result = await this.$http.post('/goodsCategory/switchStatus',row);
      if(result.status === 200)
        this.$message.success(result.data)
    },
    //查询
    async queryBtn() {
      const { data: res } = await this.$http.post(`/goodsCategory/getGoodsCategoryList/${this.currentPage}/${this.pageSize}`,this.searchObj);
      this.tableData = res.rows;
      this.total = res.total;
    },
    //重置
    resetForm(formName) {
      console.log(formName)
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields();
    },
    //页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.queryBtn()
    },
    //当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.queryBtn()
    },
    //批量选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //头像展示失败
    errorHandler() {
      return true
    },
    //查询商品类型级别
    async queryGoodsTypeLevel() {
      const { data: res } = await this.$http.post(`/goodsCategory/queryGoodsTypeLevel`);
      this.goodsTypeLevel = res;
    },
    //商品类型列表
    async queryGoodsType() {
      const { data: res } = await this.$http.post(`/goodsCategory/queryGoodsCategoryList`);
      this.goodsTypeList = res
    }
  },
  created() {
    //商品类型列表
    this.queryGoodsType();

    this.queryBtn();

    //查询商品类型级别
    this.queryGoodsTypeLevel();


  }
}
</script>

<style scoped>

</style>